<template>
	<view class="seckill-section m-t" v-if="count>0">
		
		<view class="s-header" @click="toDetail()">
			<text class="title">{{likeList.name}}</text>
			<text class="price">套餐价￥{{likeList.PackageDiscountDrice}} <text class="yticon icon-you"></text></text>
		</view>
		<scroll-view class="floor-list" scroll-x>
			<view class="scoll-wrapper">
				<view v-for="(item, index) in likeList.combinProducts" :key="item.id" class="floor-item" @click="navToDetailPage(item)">
					<image :src="item.productPicUrl" mode="aspectFill"></image>
					<!-- <text class="new">{{item.lsUpTags[0].tag_name}}</text> -->
					<text class="title clamp">{{item.productName}}</text>
					<text class="price"><text class="unit">￥</text>{{item.FavorablePrice}}</text>
					<view class="linkData" v-if="index!=likeList.combinProducts.length-1">+</view>
				</view>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				detail:{},
				likeList:{
					combinProducts:[]
				},
				count:0
			}
		},
		methods: {
			setDatas(val){
				this.detail = val
				this.getData()
				
			},
			getData(){
				let data = {
					productId:this.detail.id,
					areaId:null
				}
				this.$Request.post(
					this.$api.httpApi.goods.getFixedSetMenuList + '&token=' + this.$SysCache.get('token') +'&iShopId=' + this.detail.iShopId,{param:data}
				).then(res => {
					if (res.code == 200) {
						this.count = res.data.count
						if(res.data.count>0){
							this.$emit("setStatus",res.data.fixedsetmenu[0])
						}
						this.likeList = res.data.fixedsetmenu[0];
						
					}
				});
			},
			navToDetailPage(item){
				let id = item.productId;
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}&iShopId=${item.iShopId}`
				})
			},
			toDetail(){
				uni.navigateTo({
					url: `/pages/detail/fixedDetail?id=${this.detail.id}&iShopId=${this.detail.iShopId}&fixedId=${this.likeList.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.s-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 92upx;
		line-height: 1;
	
		.title {
			font-size: 31upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			;
		}
		.price{
			color: #f00;
		}
	
		.right {
			font-size: 21upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(130, 130, 130, 1);
			flex: 1;
			text-align: right;
	
		}
	
	}
	.floor-list {
		white-space: nowrap;
	}
	
	.scoll-wrapper {
		display: flex;
		align-items: flex-start;
	}
	
	.floor-item {
		margin-right: 26upx;
		font-size: $font-sm+2upx;
		color: $font-color-dark;
		width: 350upx;
		line-height: 1.8;
		border-radius: 6upx;
		position: relative;
		padding-right: 100upx;
	
		image {
			height: 250upx;
			width: 250upx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
	
		}
	
		.title {
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(68, 68, 68, 1);
			font-size: 23upx;
		}
	
		.price {
			font-size: 26upx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: rgba(240, 64, 111, 1);
		}
	
		.new {
			position: absolute;
			top: 0;
			left: 0;
			width: 98upx;
			height: 32upx;
			background: rgba(77, 200, 151, 1);
			font-size: 17upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			line-height: 32upx;
		}
		.linkData{
			position: absolute;
			right: 25upx;
			font-size: 50upx;
			color: #999;
			top: 50%;
			transform: translateY(-50%);
		}
	
	}
</style>
